<template>
    <div class="page-container">
        <h-chart :options="lineChartOptions" height="400px" />

    </div>
</template>

<script setup name="validate">
import { dayjs } from "element-plus";
const { proxy } = getCurrentInstance()
/** Data */
const lineChartOptions = ref({});


/** 生命周期钩子 */
onMounted(()=>{
    let data = {
        pvList: [
            {name:'a',value:'23'},
            {name:'b',value:'11'},
            {name:'c',value:'33'},
            {name:'d',value:'43'}
        ],
    }
    updateLineChartOptions(data)
})

/** Method */
const updateLineChartOptions = (data) => {
    console.log("Updating visit trend chart options");
    lineChartOptions.value = {
        color: ['#3894FF', '#F7BA1E', '#14C9C9', '#FF6D6B'],
        tooltip: {
            color: '#FFFFFF',
            trigger: 'item',
            formatter: '{b} : {c}',
            backgroundColor: '#333',
        },
        grid: {
            left: "1%",
            right: "5%",
            bottom: "10%",
            containLabel: true,
        },
        series: [
            {
                name: "浏览量(PV)",
                type: 'pie',
                data: data.pvList,
                radius: [66, 88],
                center: ['50%', '55%'],
                areaStyle: {
                    color: "rgba(64, 158, 255, 0.1)",
                },
                smooth: true,
                label: {
                    show: true,
                },
                labelLine: {
                    show: true
                },
                itemStyle: {
                    color: "#4080FF",
                },
                lineStyle: {
                    color: "#4080FF",
                },
            },
        ],
    };
};
</script>

<style lang="less" scoped>
@import "index.less";
</style>
